<template>
  <div>
    <div class="cart_list">
      <van-checkbox-group
        v-model="result"
        v-for="(item, index) in cartList"
        :key="item.id"
      >
        <van-checkbox :name="item"></van-checkbox>
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.price"
            desc="描述信息"
            :title="item.name"
            class="goods-card"
            :thumb="item.url"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="beforeClose(index)"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
          <van-stepper
          v-show="is_Show_ste"
          v-model="item.number"
          theme="round"
          button-size="22"
          disable-input
        />
      </van-checkbox-group>

    </div>

    <!-- 下单 -->
    <div class="cart_submit">
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox @click="fn_checkedAll" v-model="checkedAll"
          >全选</van-checkbox
        >
        <template #tip>
          累计共
          <span
            style="
              text-align: center;
              font-size: 20px;
              width: 25px;
              display: inline-block;
            "
            >{{ totoalNum }}</span
          >
          件商品，可点击
          <van-button type="primary" @click="onEidt">{{
            is_Show_ste ? "保存" : "编辑"
          }}</van-button>
          按钮进行商品数量修改
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  beforeCreate(){
    let token = JSON.parse(localStorage.getItem("token"))
    if(!token){
       Toast('请登录')

        this.$router.push({path:"/Login"})

    }
  },
  created() {
    this.cartList = JSON.parse(localStorage.getItem("cart") || "[]");
  },
  data() {
    return {
      cartList: [],
      result: [],
      checkedAll: false,
      is_Show_ste: false,
    };
  },
  components: {

  },
  methods: {
    onSubmit() {
      Toast('你有钱?')
    },
    onEidt() {
      this.is_Show_ste = !this.is_Show_ste;
      if (this.is_Show_ste == false) {
        localStorage.setItem("cart", JSON.stringify(this.cartList));
      }
    },
    fn_checkedAll(e) {
      if (this.checkedAll == true) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
    },

    beforeClose(index) {
      console.log(index);
      Dialog.confirm({
        title: "删除提示",
        message: "您确定要删除该产品吗?",
      })
        .then(() => {
          this.cartList.splice(index, 1);
          localStorage.setItem("cart", JSON.stringify(this.cartList));
        })
        .catch(() => {
          console.log("no");
        });
    },
  },
  computed: {
    total() {
      return this.result.reduce((pre, cur) => {
        pre = pre + cur.number * cur.price;
        return pre;
      }, 0);
    },
    totoalNum() {
      return this.result.reduce((pre, cur) => {
        pre = pre + cur.number;
        return pre;
      }, 0);
    },
  },
  watch: {
    result: {
      handler(newVal, oldVal) {
        console.log("result", newVal);
        console.log("cartList", this.cartList);
        this.checkedAll = newVal.length == this.cartList.length;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.van-checkbox-group {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  border-bottom: 1px solid #ccc;
  .van-checkbox {
    width: 28px;
    text-align: center;
    padding-left: 15px;
  }
  .van-swipe-cell {
    flex: 1;
  }
  /deep/.van-swipe-cell__right {
    display: flex;
    justify-content: stretch;
    align-items: center;
    button {
      height: 100%;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
  z-index: 0;
}
</style>